<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
    <title>登录页面</title>

    <!--    <style type="text/css">-->
    <!--        body{-->
    <!--            text-align: center;-->
    <!--            background: #F7FAFC;-->
    <!--            overflow: hidden;-->
    <!--            background: #fff;-->
    <!--        }-->
    <!--    </style>-->
</head>
<body>
<section>
    <!-- 背景颜色 -->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <!-- 背景圆 -->
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <!-- 登录框 -->
        <div class="container">
            <div class="form">
                <h2>登录</h2>
                <form th:action="@{/userLogin}" method="post">
                    <div class="inputBox">
                        <input type="text" placeholder="账号" name="username">

                    </div>
                    <div class="inputBox">
                        <input type="password" placeholder="密码" name="password">
                    </div>
                    <div class="inputBox">
                        <input type="submit" value="登录">
                    </div>
                    <p class="forget">忘记密码?<a href="#">
                        点击这里
                    </a></p>
                    <p class="forget">没有账户?<a href="#">
                        注册
                    </a></p>
                </form>
            </div>
        </div>
    </div>
</section>
<!--<canvas id="Mycanvas"></canvas>-->
<!--<script>-->
<!--    //定义画布宽高和生成点的个数-->
<!--    var WIDTH = window.innerWidth, HEIGHT = window.innerHeight, POINT = 35;-->

<!--    var canvas = document.getElementById('Mycanvas');-->
<!--    canvas.width = WIDTH,-->
<!--        canvas.height = HEIGHT;-->
<!--    var context = canvas.getContext('2d');-->
<!--    context.strokeStyle = 'rgba(0,0,0,0.02)',-->
<!--        context.strokeWidth = 1,-->
<!--        context.fillStyle = 'rgba(0,0,0,0.05)';-->
<!--    var circleArr = [];-->

<!--    //线条：开始xy坐标，结束xy坐标，线条透明度-->
<!--    function Line (x, y, _x, _y, o) {-->
<!--        this.beginX = x,-->
<!--            this.beginY = y,-->
<!--            this.closeX = _x,-->
<!--            this.closeY = _y,-->
<!--            this.o = o;-->
<!--    }-->
<!--    //点：圆心xy坐标，半径，每帧移动xy的距离-->
<!--    function Circle (x, y, r, moveX, moveY) {-->
<!--        this.x = x,-->
<!--            this.y = y,-->
<!--            this.r = r,-->
<!--            this.moveX = moveX,-->
<!--            this.moveY = moveY;-->
<!--    }-->
<!--    //生成max和min之间的随机数-->
<!--    function num (max, _min) {-->
<!--        var min = arguments[1] || 0;-->
<!--        return Math.floor(Math.random()*(max-min+1)+min);-->
<!--    }-->
<!--    // 绘制原点-->
<!--    function drawCricle (cxt, x, y, r, moveX, moveY) {-->
<!--        var circle = new Circle(x, y, r, moveX, moveY)-->
<!--        cxt.beginPath()-->
<!--        cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI)-->
<!--        cxt.closePath()-->
<!--        cxt.fill();-->
<!--        return circle;-->
<!--    }-->
<!--    //绘制线条-->
<!--    function drawLine (cxt, x, y, _x, _y, o) {-->
<!--        var line = new Line(x, y, _x, _y, o)-->
<!--        cxt.beginPath()-->
<!--        cxt.strokeStyle = 'rgba(0,0,0,'+ o +')'-->
<!--        cxt.moveTo(line.beginX, line.beginY)-->
<!--        cxt.lineTo(line.closeX, line.closeY)-->
<!--        cxt.closePath()-->
<!--        cxt.stroke();-->

<!--    }-->
<!--    //初始化生成原点-->
<!--    function init () {-->
<!--        circleArr = [];-->
<!--        for (var i = 0; i < POINT; i++) {-->
<!--            circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10)/40, num(10, -10)/40));-->
<!--        }-->
<!--        draw();-->
<!--    }-->

<!--    //每帧绘制-->
<!--    function draw () {-->
<!--        context.clearRect(0,0,canvas.width, canvas.height);-->
<!--        for (var i = 0; i < POINT; i++) {-->
<!--            drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);-->
<!--        }-->
<!--        for (var i = 0; i < POINT; i++) {-->
<!--            for (var j = 0; j < POINT; j++) {-->
<!--                if (i + j < POINT) {-->
<!--                    var A = Math.abs(circleArr[i+j].x - circleArr[i].x),-->
<!--                        B = Math.abs(circleArr[i+j].y - circleArr[i].y);-->
<!--                    var lineLength = Math.sqrt(A*A + B*B);-->
<!--                    var C = 1/lineLength*7-0.009;-->
<!--                    var lineOpacity = C > 0.03 ? 0.03 : C;-->
<!--                    if (lineOpacity > 0) {-->
<!--                        drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i+j].x, circleArr[i+j].y, lineOpacity);-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--        }-->
<!--    }-->

<!--    //调用执行-->
<!--    window.onload = function () {-->
<!--        init();-->
<!--        setInterval(function () {-->
<!--            for (var i = 0; i < POINT; i++) {-->
<!--                var cir = circleArr[i];-->
<!--                cir.x += cir.moveX;-->
<!--                cir.y += cir.moveY;-->
<!--                if (cir.x > WIDTH) cir.x = 0;-->
<!--                else if (cir.x < 0) cir.x = WIDTH;-->
<!--                if (cir.y > HEIGHT) cir.y = 0;-->
<!--                else if (cir.y < 0) cir.y = HEIGHT;-->

<!--            }-->
<!--            draw();-->
<!--        }, 16);-->
<!--    }-->

<!--</script>-->
</body>
</html>
